<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的JavaScript图像延迟加载库Echo.js</title>
    <style>
        .demo img {
            width: 736px;
            height: 490px;
            background: url(images/loading.gif) 50% no-repeat;
        }
    </style>
</head>
<body>
    <div class="demo" style="width: 736px; margin: 0 auto;">
        <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
        <img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg">
        <img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg">
        <img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg">
        <img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg">
        <img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg">
        <img class="lazy" src="images/blank.gif" data-echo="images/big-7.jpg">
    </div>
</body>
<script src="js/echo.min.js"></script>
<script>
    Echo.init({
        // 指定距离视窗上下左右位置图片预加载 Number|String Default: 0
        offset: 0,
        // 延迟加载  Number|String	Default: 250
        throttle: 0
    });
</script>
</html>